<template>
  <div class="leave-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="审批状态" prop="applyState">
          <el-select v-model="queryForm.applyState">
            <el-option value="" label="全部" />
            <el-option :value="1" label="待审批" />
            <el-option :value="2" label="审批中" />
            <el-option :value="3" label="审批通过" />
            <el-option :value="4" label="审批拒绝" />
            <el-option :value="5" label="作废" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApplyList">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleApply">申请休假</el-button>
      </div>
      <el-table :data="applyList">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">查看</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row._id)"
              v-if="[1, 2].includes(scope.row.applyState)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev,pager,next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="申请休假" v-model="showModal" width="70%">
      <el-form ref="dialogForm" :model="leaveForm" label-width="120px" :rules="rules">
        <el-form-item label="休假类型" prop="applyType" required>
          <el-select v-model="leaveForm.applyType">
            <el-option label="事假" :value="1" />
            <el-option label="调休" :value="2" />
            <el-option label="年假" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="休假时间" required>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="startTime" required>
                <el-date-picker
                  v-model="leaveForm.startTime"
                  type="date"
                  placeholder="选择开始日期"
                  @change="(val) => handleDateChange('startTime', val)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1" style="text-align: center"> - </el-col>
            <el-col :span="8">
              <el-form-item prop="endTime" required>
                <el-date-picker
                  v-model="leaveForm.endTime"
                  type="date"
                  placeholder="选择结束日期"
                  @change="(val) => handleDateChange('endTime', val)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="休假时长" required>{{ leaveForm.leaveTime }}</el-form-item>
        <el-form-item label="休假原因" prop="reasons" required>
          <el-input
            type="textarea"
            :row="3"
            placeholder="请输入休假原因"
            v-model="leaveForm.reasons"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  destroy-on-close 清空缓存 -->
    <el-dialog
      title="申请休假详情"
      width="50%"
      v-model="showDetailModal"
      destroy-on-close
    >
      <el-steps :active="detail.applyState > 2 ? 3 : detail.applyState" align-center>
        <el-step title="待审批"></el-step>
        <el-step title="审批中"></el-step>
        <el-step title="审批通过/审批拒绝"></el-step>
      </el-steps>
      <el-form label-width="120px" label-suffix=":">
        <el-form-item label="休假类型">
          <div>{{ detail.applyTypeName }}</div>
        </el-form-item>
        <el-form-item label="休假时间">
          <div>{{ detail.time }}</div>
        </el-form-item>
        <el-form-item label="休假时长">
          <div>{{ detail.leaveTime }}</div>
        </el-form-item>
        <el-form-item label="休假原因">
          <div>{{ detail.reasons }}</div>
        </el-form-item>
        <el-form-item label="审批状态">
          <div>{{ detail.applyStateName }}</div>
        </el-form-item>
        <el-form-item label="审批人">
          <div>{{ detail.curAuditUserName }}</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/**
 * reactive 一般用来创建引用数据类型
 * ref 一般用来定义数字数据类型
 * toRaw 把响应式对象转换为普通对象
 */
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import utils from '../utils/utils'
export default {
  name: 'Leave',
  setup() {
    // 获取CurrentInstance 上下文对象
    const { proxy } = getCurrentInstance()
    const queryForm = reactive({
      applyState: 1
    })
    // 初始化分页对象
    const pager = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0
    })
    // 定义动态表格-格式
    const columns = reactive([
      {
        label: '单号',
        prop: 'orderNo'
      },
      {
        label: '休假时间',
        prop: '',
        formatter(row) {
          return (
            utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd') +
            '到' +
            utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
          )
        }
      },
      {
        label: '休假时间',
        prop: 'leaveTime'
      },
      {
        label: '休假类型',
        prop: 'applyType',
        formatter(row, column, value) {
          return {
            1: '事假',
            2: '调休',
            3: '年假'
          }[value]
        }
      },
      {
        label: '休假原因',
        prop: 'reasons'
      },
      {
        label: '申请时间',
        prop: 'createTime',
        width: 180,
        formatter: (row, column, value) => {
          return utils.formateDate(new Date(value))
        }
      },
      {
        label: '审批人',
        prop: 'auditUsers'
      },
      {
        label: '当前审批人',
        prop: 'curAuditUserName'
      },
      {
        label: '状态审批',
        prop: 'applyState',
        formatter(row, column, value) {
          return {
            1: '待审批',
            2: '审批中',
            3: '审批拒绝',
            4: '审批通过',
            5: '作废'
          }[value]
        }
      }
    ])
    // 申请列表
    const applyList = ref([])
    // 创建休假弹框表单
    const leaveForm = reactive({
      applyType: 1,
      startTime: '',
      endTime: '',
      leaveTime: '0天',
      reasons: ''
    })
    // 操作行为 create：创建 delete：作废
    const action = ref('create')
    // 弹框控制
    const showModal = ref(false)
    // 休假详情弹框控制
    const showDetailModal = ref(false)
    // 休假详情
    let detail = ref({})
    // 表单校验规则
    const rules = {
      startTime: [
        {
          type: 'date',
          required: true,
          message: '请输入开始日期',
          trigger: ['change', 'blur']
        }
      ],
      endTime: [
        {
          type: 'date',
          required: true,
          message: '请输入结束日期',
          trigger: ['change', 'blur']
        }
      ],
      reasons: [
        {
          required: true,
          message: '请输入休假原因',
          trigger: ['change', 'blur']
        }
      ]
    }
    // 初始化接口调用
    onMounted(() => {
      getApplyList()
    })
    // 加载申请列表
    const getApplyList = async () => {
      let params = { ...queryForm, ...pager }
      let { list, page } = await proxy.$api.getApplyList(params)
      applyList.value = list
      pager.total = page.total
    }
    // 获取用户列表
    const getUserList = async () => {
      let params = { ...user, ...pager }
      try {
        const { list, page } = await proxy.$api.getUserList(params)
        userList.value = list
        pager.total = page.total
      } catch (error) {}
    }
    // 重置查询表单
    const handleReset = (form) => {
      proxy.$refs[form].resetFields()
    }
    // 分页事件处理
    const handleCurrentChange = (current) => {
      pager.pageNum = current
      getUserList()
    }
    // 点击申请休假-展示弹框
    const handleApply = () => {
      showModal.value = true
      action.value = 'create'
    }
    // 弹框关闭
    const handleClose = () => {
      showModal.value = false
      handleReset('dialogForm')
    }
    // 获取休假时长
    const handleDateChange = (key, val) => {
      let { startTime, endTime } = leaveForm
      if (!startTime || !endTime) return
      if (startTime > endTime) {
        proxy.$message.error('开始日期不能晚于结束日期')
        leaveForm.leaveTime = '0天'
        setTimeout(() => {
          leaveForm[key] = ''
        }, 0)
      } else {
        leaveForm.leaveTime = (endTime - startTime) / (24 * 60 * 60 * 1000) + 1 + '天'
      }
    }
    // 表单提交
    const handleSubmit = () => {
      proxy.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          try {
            let params = { ...leaveForm, action: action.value }
            let res = await proxy.$api.leaveOperate(params)
            proxy.$message.success('创建成功')
            handleClose()
            getApplyList()
          } catch (error) {}
        }
      })
    }
    // 查看休假详情
    const handleDetail = (row) => {
      let data = { ...row }
      data.applyTypeName = {
        1: '事假',
        2: '调休',
        3: '年假'
      }[data.applyType]
      data.time =
        utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd') +
        '到' +
        utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
      // 1.待审批 2.审批中 3.审批拒绝 4.审批通过 5.作废
      data.applyStateName = {
        1: '待审批',
        2: '审批中',
        3: '审批拒绝',
        4: '审批通过',
        5: '作废'
      }[data.applyState]
      detail.value = data
      showDetailModal.value = true
    }
    // 休假作废
    const handleDelete = async (_id) => {
      try {
        let params = { _id, action: 'delete' }
        let res = await proxy.$api.leaveOperate(params)
        proxy.$message.success('删除成功')
        getApplyList()
      } catch (error) {}
    }
    return {
      queryForm,
      pager,
      columns,
      applyList,
      leaveForm,
      action,
      showModal,
      rules,
      showDetailModal,
      detail,
      getApplyList,
      getUserList,
      handleReset,
      handleCurrentChange,
      handleApply,
      handleClose,
      handleSubmit,
      handleDateChange,
      handleDetail,
      handleDelete
    }
  }
}
</script>

<style lang="scss"></style>
